<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>魔方</p>
			<div></div>
		</div>
		<div class="setting-form">
			<div class="magic-square-box">
				<div class="magic-square-matrix">
					<el-form :model="form">
						<el-form-item label="图片类型">
							<el-radio-group v-model="form.type" @change="changeBoxMatrix">
								<el-radio :label="item.value" v-for="(item, index) in matrixTypeList">{{ item.lable }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<div :style="{ height: form.type == 1 ? '184px' : '368px' }">
								<div v-for="(item, index) in form.magicSquare" :key="index"
									:class="['magic-square-selected', { active: index === selectedEditBoxIndex }]"
									:style="`width:${oneMatrixBoxWidth * item.widthNum + 1}px;height:${oneMatrixBoxWidth * item.heightNum + 1}px;top:${item.yInx * oneMatrixBoxWidth}px;left:${item.xInx * oneMatrixBoxWidth}px;`"
									@click="handleSelected(item, index)">
									<p>
										{{ `${oneMatrixBoxWidth * item.widthNum}X${oneMatrixBoxWidth *
											item.heightNum}`
										}}
									</p>
								</div>
							</div>
						</el-form-item>
						<el-form-item>
							<div class="img-item" v-if="form.magicSquare && form.magicSquare[selectedEditBoxIndex]">
								<div class="left-img">
									<div class="choose-image">
										<div @click="chooseImage">
											<el-icon :size="20">
												<ele-Plus />
											</el-icon>
										</div>
										<img style="width: 100%;height: 100%;position: absolute;top: 0px;right: 0px;"
											v-if="form.magicSquare[selectedEditBoxIndex].image"
											:src="form.magicSquare[selectedEditBoxIndex].image" />
										<span v-if="form.magicSquare[selectedEditBoxIndex].image" class="modify-image"
											@click="chooseImage">更换图片 </span>
									</div>
								</div>
								<div class="right-info">
									<div class="info-top">
										<div>
											<p>链接配置</p>
										</div>
									</div>
									<linkPage ref="linkPageUrl" :pageUrl="form.magicSquare[selectedEditBoxIndex].linkUrl"
										:pageName="form.magicSquare[selectedEditBoxIndex].linkTitle"
										@linkPageCurrent="linkPageCurrent">
									</linkPage>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="图片高度">
							<el-slider v-model="form.height" show-input :show-input-controls="false" :min="0" :max="1000" />
						</el-form-item>
						<el-form-item label="页面边距">
							<el-slider v-model="form.styleMargin" show-input :show-input-controls="false" :min="0"
								:max="30" />
						</el-form-item>
						<el-form-item label="图片边距">
							<el-slider v-model="form.stylePadding" show-input :show-input-controls="false" :min="0"
								:max="30" />
						</el-form-item>
						<el-divider />

					</el-form>
				</div>
			</div>
		</div>
		<imgDialog ref="imgDialogRef" :canChooseImagesNum="1" @changeImg="changeImg"></imgDialog>
	</div>
</template>

<script lang="ts">
import linkPage from './linkPage.vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import { reactive, defineComponent, toRefs, watch, ref, onMounted } from 'vue';
import imgDialog from '/@/components/selectMaterial/imgDialog/index.vue';
interface DataState {
	form: any,
}
export default defineComponent({
	components: { linkPage, imgDialog },
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {

		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		const imgDialogRef = ref();
		const limitNum = ref(10);
		const selectedEditBoxIndex = ref(0);
		const oneMatrixBoxWidth = ref(184);
		const initMagicSquare = ref({
			info: {},
			image: "",
			widthNum: 0,
			heightNum: 1,
			xInx: 0,
			yInx: 0,
			height: 190,
			linkUrl: '',
			linkTitle: ''

		});
		const matrixTypeList = ref([
			{
				lable: '一行两个',
				value: 1,
				widthNum: 2,
				heightNum: 1,
				matrix: [
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 0,
						yInx: 0,

					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 1,
						yInx: 0,

					},
				],
			},
			{
				lable: '二左二右',
				value: 2,
				widthNum: 2,
				heightNum: 2,
				matrix: [
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 0,
						yInx: 0,

					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 1,
						yInx: 0,

					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 0,
						yInx: 1,

					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 1,
						yInx: 1,

					},
				],
			},
			{
				lable: '一左二右',
				value: 3,
				widthNum: 2,
				heightNum: 2,
				matrix: [
					{
						widthNum: 1,
						heightNum: 2,
						xInx: 0,
						yInx: 0,
					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 1,
						yInx: 0,
					},
					{
						widthNum: 1,
						heightNum: 1,
						xInx: 1,
						yInx: 1,
					},

				],
			}
		]);
		const state = reactive<DataState>({
			form: {
				type: 1,
				cornerStyle: '1',
				stylePadding: 0,
				styleMargin: 0,
				widthNum: 2,
				heightNum: 2,
				magicSquare: [],
				height: 190,
			},
		});
		//选择图片/更换图片
		const chooseImage = () => {
			imgDialogRef.value.dialog = true;
		};
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					type: 1,
					cornerStyle: '1',
					stylePadding: 0,
					styleMargin: 0,
					widthNum: 2,
					heightNum: 2,
					magicSquare: [],
					height: 190,
				};
				initDefaultCube();
			} else {
				state.form = props.formData;
			}
			if (diyPageData.value.selectedIndex != undefined) {
				diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
			}
		});
		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
			},
			{ deep: true, immediate: true }
		);
		//选择图片回调方法
		const changeImg = (data: any) => {
			state.form.magicSquare[selectedEditBoxIndex.value].image = data[0];
		};
		//选中矩阵方法
		const handleSelected = (row: any, index: number) => {
			selectedEditBoxIndex.value = index;
		}
		//切换魔方类型方法
		const changeBoxMatrix = () => {
			initDefaultCube();
		}
		// 初始化魔方方法
		const initDefaultCube = () => {
			state.form.magicSquare = []
			const item = JSON.parse(
				JSON.stringify(
					matrixTypeList.value.find(
						(v) => v.value === Number(state.form.type)
					)
				)
			);
			if (item) {
				for (const ol in state.form) {
					if (
						ol === "magicSquare" &&
						item.hasOwnProperty("matrix") &&
						item.matrix.length > 0
					) {
						item.matrix.map((mi: any) => {
							const magicSquare = JSON.parse(
								JSON.stringify(initMagicSquare.value)
							);
							for (const ol in magicSquare) {
								if (!mi.hasOwnProperty(ol)) {
									mi[ol] = magicSquare[ol];
								}
							}
							state.form.magicSquare.push(mi);
						});
					} else if (item.hasOwnProperty(ol)) {
						state.form[ol] = item[ol];
					}
				}

			}

		}
		const linkPageCurrent = ($event: any) => {
			state.form.magicSquare[selectedEditBoxIndex.value].linkUrl = $event.pageUrl;
			state.form.magicSquare[selectedEditBoxIndex.value].linkTitle = $event.pageName;
		}
		return {
			limitNum,
			imgDialogRef,
			matrixTypeList,
			oneMatrixBoxWidth,
			selectedEditBoxIndex,
			changeImg,
			chooseImage,
			handleSelected,
			changeBoxMatrix,
			linkPageCurrent,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';

.magic-square-box {
	padding: 10px;
	background: #fff;

	.magic-square-matrix {
		position: relative;
		margin: 0 auto;
		width: 368px;

		.magic-square-selected {
			position: absolute;
			background-color: #fff;
			border: 1px solid #ebedf0;
			text-align: center;
			color: #7d7e80;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: fit-content;

			&.active {
				background: #e0edff;
				border: 1px solid #409EFF;
				color: #409EFF;
				z-index: 2;
				cursor: auto;
			}

		}

		.img-item {
			display: flex;
			border: 1px solid #e0e0e0;
			border-radius: 4px;
			padding: 10px;

			.left-img {
				width: 90px;
				height: 90px;
				border-radius: 2px;
				border: 1px solid #eee;

				.choose-image {
					position: relative;
					width: 90px;
					height: 90px;
					line-height: 90px;
					text-align: center;

					.modify-image {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 20px;
						line-height: 20px;
						font-size: 12px;
						color: #fff;
						background: rgba(0, 0, 0, 0.5);
						cursor: pointer;
					}
				}

				&:hover {
					cursor: pointer;
				}
			}

			.right-info {
				padding-left: 5px;

				p {
					padding-bottom: 10px;
				}

				.info-top {
					display: flex;
					justify-content: space-between;
				}
			}

		}
	}



}
</style>
